<template>
    <div>
        <headers></headers>
        <search :cities="lists.data.cities"></search>
        <list :cities="lists.data.cities"  :hot="lists.data.hotCities" :letter="letter"></list>
        <Alphabet :cities="lists.data.cities" @change="handleLetterChange"></Alphabet>
    </div>
</template>

<script>
import headers from '@/components/city/headers.vue'
import search from '@/components/city/search.vue'
import list from '@/components/city/list.vue'
import Alphabet from '@/components/city/Alphabet.vue'
import lists from '@/assets/mock/city'
    export default {
        components:{headers,search,list,Alphabet},
        data() {
            return {
                lists,
                letter:''
            }
        },
        mounted(){
            console.log(list);
        },
        methods:{
            handleLetterChange(letter){
                console.log('city',letter)
                this.letter = letter
            }
        },
        
    }
</script>

<style lang="scss" scoped>

</style>